<template>
  <view
    class="agen-box flex align-center"
    @click="$u.route({
      url: '/pages-details/conference/index',
      params: {
        mId: option.tmi_id
      }
    })"
  >
    <image :src="getImgUrl(option.tmi_icon)" mode="aspectFill"></image>

    <view class="agen-box__right c333">
      <view class="font32 fw500">{{ option.tmi_name }}</view>
      <view class="font24 h2">{{ timeView }}</view>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
export default {
  props: {
    option: {
      type: Object,
      default: () => ({}),
    },
  },

  computed: {
    timeView() {
      if (this.option.tmi_start_time && this.option.tmi_end_time) {
        return (
          dayjs(this.option.tmi_start_time).format("YYYY/MM/DD") +
          "-" +
          dayjs(this.option.tmi_end_time).format("YYYY/MM/DD")
        );
      }
      return '-'
    },
  },
};
</script>

<style lang="scss" scoped>
.agen-box {
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(72, 30, 193, 0.1);
  border-radius: 20rpx;
  overflow: hidden;

  image {
    width: 320rpx;
    height: 144rpx;
    border-radius: 20rpx;
  }

  &__right {
    margin-left: 20rpx;

    .h2 {
      margin-top: 22rpx;
    }
  }
}
</style>